{% extends "skeleton.html" %}
{% import "forum/macros.html" as m %}

{% block header %}
  {{m.html_header(resource_version)}}
  <script src="/ckeditor/v{{resource_version}}/ckeditor.js"></script>
{% endblock %}
{% block pagetitle %}Forum &bull; {{forum.name}} &bull; {% if post %}Edit Post{% else %}New Post{% endif %}{% endblock %}
{% block title %}Forum &bull; {{forum.name}} &bull; {% if post %}Edit Post{% else %}New Post{% endif %}{% endblock %}

{% block maincontent %}
  <section class="content">
    <nav class="breadcrumbs">
      <ul>
        <li><a href="/">War Worlds</a>
        <li><a href="/forum">Forums</a>
        <li><a href="/forum/{{forum.slug}}">{{forum.name}}</a>
        <li>New Post</li>
      </ul>
    </nav>

    <form method="POST">
      <fieldset>
        {% if not post -%}
          <h1>New Post in {{forum.name}}</h1>
        {%- else -%}
          <h1>Editing Post in {{forum.name}}</h1>
        {%- endif %}
        <p>Compose your post below. Please keep the tone and content of your message friendly, and we'll all get along!</p>
        {% if not forum_thread %}
          <div class="forum-field">
            <label for="post-subject">Subject:</label>
            <div class="hack"><input type="text" name="post-subject" id="post-subject" placeholder="A short subject to describe your topic"></div>
          </div>
        {% endif %}
        <div class="forum-field forum-field-markitup">
          <label for="post-content">Message:</label>
          <div class="hack"><textarea name="post-content" id="post-content">{% if post %}{{post.content}}{% endif %}</textarea></div>
        </div>
        <div class="forum-field forum-field-submit">
          <div class="input-button"><input type="submit" value="Post"></div>
        </div>
      </fieldset>
    </form>
  </section>
  <script>
    $(function() {
      var editor = CKEDITOR.replace("post-content");
      var $container = $("fieldset div.forum-field-markitup div.hack");

      CKEDITOR.on("instanceReady", function() {
        editor.resize($container.width(), $container.height());
      });
      $(window).resize(function() {
        editor.resize($container.width(), $container.height());
      });

      var changed = false;
      var saving = false;
      editor.on("change", function() {
        changed = true;
      });
      $("form").on("submit", function() {
        saving = true;
      });
      $(window).on("beforeunload", function() {
        if (changed && !saving) {
          return "You have unsaved changes.";
        }
      });
    });
  </script>
{% endblock %}